<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>植物大战僵尸</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .wrap {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            border:1px solid black;
            position:relative;
            overflow: hidden;
            background-image: url(img/caodi.png);
        }
        .wrap .zhiwu {
            width: 50px;
            height: 80px;
            position:absolute;
            top: 225px;
            z-index: 1;
        }
        .wrap .zi1 {
            width: 17px;
            height: 17px;
            background-color:yellow;
            position:absolute;
            top: 240px;
            left: 30px;
            border-radius: 50%;
        }
        .wrap .zi2 {
            width: 17px;
            height: 17px;
            background-color:cyan;
            position:absolute;
            top: 240px;
            left: 30px;
            border-radius: 50%;
        }
        .wrap .zi3 {
            width: 17px;
            height: 17px;
            background-color:red;
            position:absolute;
            top: 240px;
            left: 30px;
            border-radius: 50%;
        }
        .wrap .shi {
            width: 80px;
            height: 100px;
            font-size: 1em;
            color:white;
            text-align: center;
            position:absolute;
            right: 0;
            top: 200px;
            background-image:url(img/js.png);
            background-repeat:no-repeat;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <button>GO</button>
        <div class="zhiwu"><img src="img/zhiwu.png" alt=""></div>
        <div class="zi1">1</div>
        <div class="zi2">2</div>
        <div class="zi3">3</div>
        <div class="shi">100</div>
    </div>
</body>
<script>
    var go=document.getElementsByTagName("button")[0];
    var zi1=document.querySelector(".zi1");
    var zi2=document.querySelector(".zi2");
    var zi3=document.querySelector(".zi3");
    var shi=document.querySelector(".shi");
    var iStar=false;
    var timer=null;
    var timer1=null;
    var timer2=null;
    var timer11=null;
    var timer22=null;
    var timer3=null;
    //碰撞检测
    function isCrash(a,b){
        var al=a.offsetLeft;
        var ar=a.offsetLeft+a.offsetWidth;
        var at=a.offsetTop;
        var ab=a.offsetTop+a.offsetHeight;
        
        var bl=b.offsetLeft;
        var br=b.offsetLeft+b.offsetWidth;
        var bt=b.offsetTop;
        var bb=b.offsetTop+b.offsetHeight;
        
        if (al>br||bl>ar||at>bb||bt>ab){
            return false;
        }
        return true;
    }
    go.onclick=function(){
        timer=setInterval(function(){
            zi1.style.left=zi1.offsetLeft+10+"px";
            timer1=setInterval(function(){
                zi2.style.left=zi2.offsetLeft+10+"px";
                clearInterval(timer1);
            },300);
           timer2=setInterval(function(){
                zi3.style.left=zi3.offsetLeft+10+"px";
                clearInterval(timer2);
            },600);
            
            if (isCrash(zi1,shi)){
                zi1.style.left=30+"px";
                shi.innerHTML-=10;
                if (shi.innerHTML/1<=0){
                    clearInterval(timer);
                    shi.style.display="none";
                    zi1.style.display="none";
//                    if (zi2.offsetLeft>=500){
//                        zi2.style.display="none";
//                    }
//                    if (zi3.offsetLeft>=500){
//                        zi3.style.display="none";
//                    }
                    timer11=setInterval(function(){
                        zi2.style.display="none";
                        clearInterval(timer11);
                    },1500);
                    timer22=setInterval(function(){
                        zi3.style.display="none";
                        clearInterval(timer22);
                    },1800);     
                }
            }
            else if (isCrash(zi2,shi)){
                zi2.style.left=30+"px";
                shi.innerHTML-=10;
                if (shi.innerHTML/1<=0){
                    clearInterval(timer);
                    shi.style.display="none";
                }
            }
            else if (isCrash(zi3,shi)){
                zi3.style.left=30+"px";
                shi.innerHTML-=10;
                if (shi.innerHTML/1<=0){
                    clearInterval(timer);
                    shi.style.display="none";
                }
            }
        },50);
        timer3=setInterval(function(){
            shi.style.left=shi.offsetLeft-2+'px';   
        },50);
    }
</script>
</html>